<template>
	<div>
		<div class="template" v-show="Loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>我的收藏</div>
			<div></div>
		</header>
		
		<!--分类-->
		<div class="collectTitle">
			<div v-for='item in typeName' @click="cowryon(item.name)" :class="name == item.name ?'on' :'collectTitle_d'">{{item.name}}</div>
		</div>
		<!--收藏-->
		<div class="coolectgoods" v-show="show">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" class="contentList">
				<li v-for='item in collectgoods'>
					<div class="coolectgoodsList">
						<div class="coolectgoddsimg">
							<img :src="item.goodsImg">
						</div>
						<div class="coolectgoddsName">
							{{item.goodsName}}
						</div>
						<div class="originalprice">
							<div>原价￥{{item.originPrice}}</div>
							<div> / {{item.couponAmount}}降</div>
						</div>
						<div class="nowprice">
							<div>￥{{item.price}}</div>
							<div>已抢{{item.totalSale}}件</div>
						</div>
						<div class="immediately">立即抢购</div>
					</div>
				</li>
			</ul>
		</div>
		
		<!--店铺-->
		
		<div class="shop" v-show="!show">
			<div class="shopList" v-for='item in shopList'>
				<div>
					<img :src="item.img">{{item.storeName}}
				</div>
				<div><img src="../assets/images1/btn_icon_lift_9@2x.png"></div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				token:'',	
				show:true,
				name:'宝贝',
				typeName:[{name:'宝贝'},{name:'店铺'}],
				shopList:[],    //店铺列表
				collectgoods:[],  //收藏列表
				index: 0,
				loading:'',
				Loading:true,
			}
		},
		created(){
			this.token = localStorage.getItem('token');
			//店铺收藏
			var url = BaseUrl + 'users/mystorecollectlist?appId=wap&token=' + this.token;
			this.$http.get(url).then(res=>{
				this.Loading = false;
				if(res.data.code == '10000'){
					this.shopList = res.data.data
				}else{
					Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					})
				}
			}).catch(error=>{
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
			})
		},
		methods:{
			cowryon:function(name){
				this.name = name;
				this.show = !this.show;
			},
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			singInfo(index){
				this.Loading = true;
				//商品收藏
				var url = BaseUrl + 'users/mycollectlist?token=' +this.token + '&appId=wap&length=6&start=' + this.index;
				this.$http.get(url).then(res=>{
//					console.log(res.data.data);
					if(res.data.code == '10000'){
						this.Loading = false;
						this.collectgoods = this.collectgoods.concat(res.data.data.list);
						if(res.data.data.isMore == "none") {
							this.loading = true;
						return;
						} else if(res.data.data.isMore == "have") {
							this.loading = false;
							this.index++;
						}
					}else{
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
				}).catch(error=>{
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
			})
				
			},
			loadMore() {
				this.loading = this.loading;
				if(this.loading == false){
					setTimeout(() => {
						this.singInfo(this.index);
						this.loading = this.loading;
					}, 100);
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	/*顶部*/
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.25rem;
		color: #323232;
		font-size: 0.36rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.collectTitle{
		width: 100%;
		height: 0.88rem;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ccc;
		background: #fff;
	}
	.collectTitle_d{
		width: 50%;
		height: 100%;
		line-height: 0.88rem;
		text-align: center;
		color: #323232;
		font-size: 0.27rem;
	}
	.on{
		width: 50%;
		height: 100%;
		line-height: 0.88rem;
		text-align: center;
		color: #ff2040;
		font-size: 0.27rem;
		border-bottom: 2px solid #ff2040;
	}
	
	.coolectgoods{
		border-top: 0.14rem solid #f2f2f2;
	}
	.coolectgoods ul{
		height: 11.3rem;
		overflow-y: auto;
	}
	.coolectgoodsList{
		width: 48%;
		float: left;
		background: #fff;
		margin-right: 0.1rem;
	}
	.coolectgoodsList:nth-child(2){
		margin-right: 0;
	}
	.coolectgoddsimg{
		width: 100%;
		height: 3.2rem;
	}
	.coolectgoddsimg img{
		width: 100%;
		height: 3.2rem;
	}
	.coolectgoddsName{
		height: 0.55rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #878787;
		font-size: 0.26rem;
		line-height: 1.2;
		padding: 0 0.2rem;
		margin-top: 0.2rem;
	}
	
	.originalprice{
		display: flex;
		font-size: 0.2rem;
		margin: 0 0.2rem;
	}
	.originalprice div:nth-child(1){
		color: #9a9a9a;
		text-decoration: line-through;
		margin-right: 0.1rem;
	}
	.originalprice div:nth-child(2){
		color: #ff2040;
	}
	
	.nowprice{
		font-size: 0.26rem;
		margin: 0.1rem 0 0.1rem 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0.1rem 0.2rem;
	}
	.nowprice div:nth-child(1){
		color: #ff2040;
		font-weight: bold;
	}
	.nowprice div:nth-child(2){
		color: #878787;
	}
	.immediately{
		margin: 0 0.2rem;
		border-radius: 0.4rem;
		text-align: center;
		padding: 0.1rem 0;
		background: #ff2040;
		color: #fff;
		margin-bottom: 0.2rem;
	}
	
	
	/*店铺*/
	.shop{
		padding: 0 0.25rem;
		background: #fff;
	}
	.shopList{
		padding: 0.25rem 0;
		align-items: center;
		display: flex;
		flex-direction:row;
		justify-content: space-between;
	}
	.shopList div:nth-child(1){
		color: #323232;
		font-size: 0.27rem;
		display: flex;
		align-items: center;
	}
	.shopList div:nth-child(1) img{
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		margin-right: 0.23rem;
	}
	.shopList div:nth-child(2) img{
		width: 0.23rem;
		height: 0.43rem;
	}
</style>